<template><!--正在关注-->
    <div style="height: 100%;">
        <navbar :title="$t('personal_attention')"></navbar>
        <div class="content-noBottom" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getAttentionList"
                >
                    <div :class="{'height100' : total === 0}">
                        <div class="userSearch-input" ><!--用户名/全名/部门/职级-->
                            <input type="text" :placeholder="$t('search_tips_1')" @keyup="searchUser" v-model="searchName">
                            <i class="input-delete-box-01" @click="deleteSearch()" v-if="searchName.length > 0"><i class="input-delete-icon-01"></i></i>
                        </div>
                        <ul class="module-list-13">
                            <li class="clearfix" v-for="list in attentionList" :key="list.userEntId" :style="{'padding-right' : list.userEntId != loginUserId ? '70px' : '15px'}">
                                <router-link tag="span" class="box-left" :to="isMeInd == true ? '/personal/' + cwnEncrypt(list.userEntId) : ''"><img :src="appUrl + list.userPoto" alt=""></router-link>
                                <router-link tag="div" :to="isMeInd == true ? '/personal/' + cwnEncrypt(list.userEntId) : ''">
                                    <p class="font-size15 word-clamp-1 margin-top5">{{ list.usrDisplayBil }}</p>
                                    <p style="width: 100%;"><span style="padding-right: 5px;">{{ list.usgDisplayBil }}</span><span v-if="list.ugrDisplayBil != 'Unspecified'">{{ list.ugrDisplayBil }}</span></p>
                                </router-link>
    <!--                            <span class="box-right" @click="changeAttention(index)" v-if="list.userEntId != loginUserId"><i class="att-icon" :class="{'att-icon-cur' : list.snsAttention !== undefined && list.snsAttention.s_att_target_uid !== undefined && !list.snsAttention.s_att_source_uid, 'att-icon-each' : list.snsAttention !== undefined && list.snsAttention.s_att_source_uid !== undefined && list.snsAttention.s_att_target_uid !== undefined}"></i></span>-->
                            </li>
                        </ul>
                        <!--暂无数据-->
                        <div v-if="total === 0" style="height:calc(100% - 55px);">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t('no_data') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'Attention',
    data() {
        return {
            pageNo: 1,
            total: 0,
            searchName: '',
            usrEntId: '',
            attentionList: [],
            loginUserId: '', //登录用户id
            isMeInd: false, //用户id和登录用户id不一致
            finished: false,
            isRefresh: false,
            isLoading: false
        };
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        /*用户搜索*/
        searchUser() {
            clearTimeout(this.indTime);
            this.indTime = setTimeout(() => {
                this.pageNo = 1;
                this.attentionList = [];
                this.getAttentionList();
            }, 500);
        },
        deleteSearch() {
            this.searchName = '';
            this.pageNo = 1;
            this.attentionList = [];
            this.getAttentionList();
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getAttentionList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getAttentionList(option) {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                // url: `/app/personal/getUserList/attention/${this.$route.params.encId}`,
                url: `/app/api/trainee/my/attention/user/list`,
                params: {
                    searchContent: this.searchName,
                    pageNo: this.pageNo
                },
                data: {
                    userName: this.searchName,
                    usrEntId: this.usrEntId
                }
            }).then(res => {
                this.total = res.data.totalRecord;
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.attentionList = res.data.results;
                    } else {
                        this.attentionList = [...this.attentionList, ...res.data.results];
                    }
                }
                this.isLoading = false;
                this.pageNo++;
                if (this.attentionList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        changeAttention(index) {
            let attention = this.attentionList[index];
            let attentUrl = '';
            if (attention.snsAttention && attention.snsAttention !== undefined && attention.snsAttention.s_att_target_uid !== undefined) {
                attentUrl = '/app/personal/cancelAttention/' + attention.usr_ent_id;
                attention.snsAttention = {};
                this.attentionList[index].snsAttention = {};
                if (this.loginUserId === attention.usr_ent_id) {
                    this.attentionList.splice(index, 1);
                }
                this.$toast(this.$t('attend_cancel'));
            } else {
                attentUrl = '/app/personal/addAttention/' + attention.usr_ent_id;
                if (!this.attentionList[index].snsAttention) {
                    this.attentionList[index].snsAttention = {};
                }
                this.attentionList[index].snsAttention.s_att_target_uid = this.loginUserId;
                this.$toast(this.$t('attend_success'));
            }
            this.$axios({
                method: 'POST',
                url: attentUrl
            }).then(res => {
            });
        }
    },
    mounted() {
        var encId = this.$route.params.encId; //用户id
        var entId = cwnDecrypt(encId);
        this.loginUserIdwb = window.localStorage.getItem('loginUser'); //用户登录id
        this.loginUserId = window.localStorage.getItem('loginUser');
        if ((entId + '') === this.loginUserIdwb || entId + '' === this.loginUserId) {
            this.isMeInd = true;
        } else {
            this.usrEntId = entId;
        }
        this.getAttentionList();
    }
};
</script>

<style scoped>
</style>
